<template>
  <div style="position: relative">
    <Spin :withIcon="true" v-if="loading"></Spin>
    <div class="listTable-area flx-row-s-c" style="padding-left: 34px">
      <div
        class="flx-row-s-c"
        v-for="(item, index) in processList"
        :key="index"
      >
        <div class="step-item" :class="[index < active ? 'b-arrow' : '']">
          {{ item }}
        </div>
        <div class="next-icon" v-if="index != 3"></div>
      </div>
    </div>
    <template v-if="getInfo != null && getInfo">
      <div class="listTable-area">
        <div class="f-16 c-black f-w-600">开票明细</div>

        <div class="filter-line flx-row-s-c b-b-d pub-m-t-30">
          <div class="flx-row-s-c content-area">
            <div class="content-title c-black">开票金额:</div>
            <span class="content c-o">￥{{ amount }}</span>
          </div>
          <div class="flx-row-s-c content-area">
            <div class="content-title c-black">发票抬头:</div>
            <span class="content c-black">{{ header }}</span>
          </div>
        </div>
        <div class="filter-line flx-row-s-c b-b-d">
          <div class="flx-row-s-c content-area">
            <div class="content-title c-black">发票状态:</div>
            <span class="content c-o">{{
              status == 0
                ? "未处理"
                : status == 1
                ? "待审核"
                : status == 2
                ? "待开票"
                : status == 3
                ? "已开票"
                : status == 4
                ? "待寄出"
                : status == 5
                ? "已寄出"
                : status == 6
                ? "审核未通过"
                : status == 7
                ? "用户取消"
                : "-"
            }}</span>
          </div>
          <div class="flx-row-s-c content-area">
            <div class="content-title c-black">发票编号:</div>
            <span class="content c-black">{{ number ? number : "-" }}</span>
          </div>
        </div>
        <div class="filter-line flx-row-s-c b-b-d">
          <div class="flx-row-s-c content-area">
            <div class="content-title c-black">开具类型:</div>
            <span class="content c-black">{{
              issuingType == 0 ? "个人" : issuingType == 1 ? "类型" : "-"
            }}</span>
          </div>
          <div class="flx-row-s-c content-area">
            <div class="content-title c-black">申请时间:</div>
            <span class="content c-black">{{
              createdTime ? createdTime : "-"
            }}</span>
          </div>
        </div>
        <div class="filter-line flx-row-s-c b-b-d">
          <div class="flx-row-s-c content-area">
            <div class="content-title c-black">发票类型:</div>
            <span class="content c-black">{{
              invoiceType == 0
                ? "增值税普通发票"
                : invoiceType == 1
                ? "增值税专用发票"
                : "-"
            }}</span>
          </div>
          <div class="flx-row-s-c content-area">
            <div class="content-title c-black">发票内容:</div>
            <span class="content c-black">{{
              contentType == 0
                ? "域名服务费"
                : contentType == 1
                ? "信息服务费"
                : "-"
            }}</span>
          </div>
        </div>
        <div class="filter-line flx-row-s-c b-b-d">
          <div class="flx-row-s-c content-area">
            <div class="content-title c-black">收件人:</div>
            <span class="content c-black">{{ consignee }}</span>
          </div>
          <div class="flx-row-s-c content-area">
            <div class="content-title c-black">收取地址:</div>
            <span class="content c-black">{{ address }}</span>
          </div>
        </div>
        <div class="filter-line flx-row-s-c b-b-d">
          <div class="flx-row-s-c content-area">
            <div class="content-title c-black">邮箱:</div>
            <span class="content c-black">{{
              postalCode ? postalCode : "-"
            }}</span>
          </div>
          <div class="flx-row-s-c content-area">
            <div class="content-title c-black">联系电话:</div>
            <span class="content c-black">{{ mobile }}</span>
          </div>
        </div>
        <div class="filter-line flx-row-s-c b-b-d">
          <div class="flx-row-s-c content-area">
            <div class="content-title c-black">快递公司:</div>
            <span class="content c-black">{{
              expressName ? expressName : "-"
            }}</span>
          </div>
          <div class="flx-row-s-c content-area">
            <div class="content-title c-black">快递编号:</div>
            <span class="content c-black">{{
              expressNumber ? expressNumber : "-"
            }}</span>
          </div>
        </div>
      </div>

      <div class="listTable-area pub-p-b-1">
        <div class="f-16 c-black f-w-600">关联交易</div>

        <table class="table-area pub-m-t-30">
          <thead>
            <tr>
              <th><div class="line-style" style="justify-content: center;min-width: 48px">序号</div></th>
              <th><div class="line-style">交易时间</div></th>
              <th><div class="line-style">类型</div></th>
              <th><div class="line-style">交易金额</div></th>
              <th><div class="line-style">可开票金额</div></th>
              <th><div class="line-style">备注</div></th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in list" :key="index">
              <td>
                <div class="line-style" style="justify-content: center;">
                  <span class="normal-f">{{ index + 1 + (page - 1) * pageSize }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f">{{ item.createdTime }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="c-o f-ell-sin">{{ item.typeName }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f">￥{{ item.payable }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f">￥{{ item.amount }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f" style="white-space: pre-wrap">{{
                    item.remark
                  }}</span>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <Empty-State
          v-if="total != null && total == 0"
          content="未搜索到任何内容！"
        ></Empty-State>
        <div class="form-page-bottom-area flx-row-c-c">
          <Page
            :total="total"
            :current="page"
            :page-size="pageSize"
            :page-size-opts="pageSizeOpts"
            @on-change="pageChange"
            @on-page-size-change="pageSizeChange"
            show-elevator
            show-sizer
            show-total
          />
        </div>
      </div>
    </template>
    <Empty-State
      v-else-if="getInfo != null && !getInfo"
      content="详情不存在！"
    ></Empty-State>
  </div>
</template>

<script>
import { getInvoiceDetail } from "@/api/user";

export default {
  name: "VipInvoiceDetail",
  data() {
    return {
      processList: [
        "1、选择开票订单",
        "2、填写发票信息和地址",
        "3、后台审核，邮件发票",
        "4、签收快递，开票成功",
      ],

      loading: false,
      // 信息
      id: null,
      getInfo: null,
      amount: "",
      status: "",
      invoiceType: "",
      issuingType: "",
      header: "",
      contentType: "",
      consignee: "",
      mobile: "",
      address: "",
      postalCode: "",
      remark: "",
      expressType: "",
      expressName: "",
      expressNumber: "",
      number: "",
      createdTime: "",
      // 分页设置
      total: null,
      pageSizeOpts: [1, 50, 100, 200],
      pageSize: 1,
      page: 1,
      list: [],
    };
  },
  created() {
    if (this.$route.query.id == null || this.$route.query.id == "") {
      this.getInfo = false;
      return;
    }
    this.id = this.$route.query.id;
    this.getInvoiceDetail();
  },
  methods: {
    async getInvoiceDetail() {
      this.loading = true;
      let params = {
        id: this.id,
        limit: this.pageSize,
        page: this.page,
      };
      let res = await getInvoiceDetail(params);
      if (res.code == 200) {
        if (this.getInfo == null) {
          this.getInfo = true;
          this.amount = res.data.amount;
          this.status = res.data.status;
          this.invoiceType = res.data.invoiceType;
          this.issuingType = res.data.issuingType;
          this.header = res.data.header;
          this.contentType = res.data.contentType;
          this.consignee = res.data.consignee;
          this.mobile = res.data.mobile;
          this.address = res.data.address;
          this.postalCode = res.data.postalCode;
          this.remark = res.data.remark;
          this.expressType = res.data.expressType;
          this.expressName = res.data.expressName;
          this.expressNumber = res.data.expressNumber;
          this.number = res.data.number;
          this.createdTime = res.data.createdTime;
        }
        this.list = res.data.info.list;
        this.total = res.data.info.total;
      } else {
        if (this.getInfo == null) {
          this.getInfo = false;
        }
      }
      this.loading = false;
    },
    // 切换pageSize
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageChange(1);
    },
    // 切换页码
    pageChange(page) {
      this.page = page;
      this.getInvoiceDetail();
    },
  },
};
</script>

<style lang="scss" scoped>
.listTable-area {
  padding: 30px;
  position: relative;
  left: -30px;
  width: calc(100% + 60px);
  border-top: 20px solid #f3f6fb;
}

.step-item {
  @include size(190px, 36px);
  border-radius: 18px;
  border: 2px solid #b6b0ae;
  // @include bg-setting(null, cover, right);
  color: #b6b0ae;
  text-align: center;
  line-height: 34px;
  font-size: 14px;

  &.b-arrow {
    background: $mainColor;
    color: #fff;
    border: 2px solid $mainColor;
  }
}

.next-icon {
  @include size(18px);
  @include bg-setting("next", 18px 10px, right);
  margin: 0 5px;
}

.filter-line {
  min-height: 39px;
}
.content-area {
  min-width: 400px;
  font-size: 14px;

  .content-title {
    flex-shrink: 0;
    width: 80px;
    margin-left: 70px;
    margin-right: 10px;
  }
}
</style>
